<div class="login-tabs position-relative wrap" style="[style]">
	<div class="flex text-center flex-center">
		<div class="flex-1 py-3 pointer font-weight-600"
		v-if="loginTabs.nav!='qrlogin'"
		:class="{'item-action':loginTabs.nav==='username'}"
		@click="loginTabs.nav='username';getTimeoutCaptcha()">密码登录</div>
		<div class="flex-1 py-3 pointer font-weight-600"
		v-if="loginTabs.nav!='qrlogin'"
		:class="{'item-action':loginTabs.nav==='vcode'}"
		@click="loginTabs.nav='vcode';getTimeoutCaptcha()">短信登录</div>
		<div class="flex-1" v-if="loginTabs.nav==='qrlogin'"></div>
		<div class="login-qrlogin-icon pointer pr-2 py-2"
		v-if="loginTabs.qrlogin">
			<img src="__TEMPLATE_STATIC__/icon/icon-login-qrcode.png" height="30px" width="30px"
			v-if="loginTabs.nav==='username'||loginTabs.nav==='vcode'"
			@click="loginTabs.nav='qrlogin'">
			<img src="__TEMPLATE_STATIC__/icon/icon-login.png" height="30px" width="30px"
			v-if="loginTabs.nav==='qrlogin'"
			@click="loginTabs.nav='username'">
		</div>
	</div>
	<div class="login-tabs position-relative text-center wrap h-100 flex1 pb-3"
	v-if="loginTabs.nav==='qrlogin'">
		<div class="flex1 text-v-center">
			<img v-if="qrloginImgUrl" :src="qrloginImgUrl" alt="" width="60%">
		</div>
		<div class="position-absolute pt-5"
		style="background-color: rgba(0,0,0,.45);left: 0;top: 0;right: 0;bottom: 0;z-index: 100;"
		v-if="loginTabs.scanQrSuccess">
			<div class="text-center pt-5">
				<i class="el-icon-check text-success h1 bg-white rounded-circle p-2"></i>
			</div>
			<div class="text-center text-white">扫码成功</div>
		</div>
		<div class="text-small text-grey mt-3">请使用《{xycms:web name="name"}APP》扫码登录</div>
	  	<div class="flex text-small text-grey mt-1 flex-v-center">
		    <div class="text-grey">登录代表你已同意</div>
		  	<div class="pl-2">
		  		<a href="/article/content/user_agreement.html" class="el-link el-link--primary" target="_blank">《用户协议》</a>
		    </div>
	    </div>
	</div>
	<el-form @submit.native.prevent="login" :model="loginTabs.form" class="px-3 pt-3 flex1" v-if="loginTabs.nav==='username'">
	<div class="flex1 wrap h-100">
		<el-form-item class="input-item flex1 mb-0">
		    <el-input v-model="loginTabs.form.username"
		    :disabled="loginTabs.btn.loading"
		    autocomplete="off" placeholder="手机号/邮箱/用户名" class="rounded-0">
		   	</el-input>
		</el-form-item>
		<el-form-item class="input-item flex1 mb-0">
		    <el-input type="password" v-model="loginTabs.form.password"
		    :disabled="loginTabs.btn.loading"
		    autocomplete="off" placeholder="密码" class="rounded-0"
		    show-password>
		    </el-input>
		</el-form-item>
	  	<el-form-item v-if="loginTabs.is_imgcode&&loginTabs.captcha_type==1" class="input-item flex1 mb-0">
	        <div class="GeeTestCaptcha">
	            <div class="GeeTestCaptchaWait text-secondary">正在加载验证码......</div>
	        </div>
	  	</el-form-item>
	  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==2" class="input-item flex1 mb-0">
	        <div class="vaptchaContainer">
				<div class="vaptcha-init-main">
				    <div class="vaptcha-init-loading">
				    <a href="/" target="_blank">
				        <img src="https://r.vaptcha.net/public/img/vaptcha-loading.gif" />
				    </a>
				    <span class="vaptcha-text">正在加载验证码...</span>
				    </div>
				</div>
			</div>
	  	</el-form-item>
	  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==3" class="input-item flex1 mb-0">
	  	</el-form-item>
	  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==4" class="input-item flex1 mb-0">
	  		<el-button 
	  		native-type="button" 
	  		:type="loginTabs.form.tsec?'success':'warning'"
	  		class="rounded-0 w-100 TencentCaptchaEl"
	  		:icon="loginTabs.form.tsec?'el-icon-circle-check':'el-icon-thumb'"
	  		:data-appid="_config.captchatsec"
	  		data-cbfn="vm.TencentCaptchaCallback">
	  			{{loginTabs.form.tsec?'验证成功':'点击验证'}}
	  		</el-button>
	  	</el-form-item>
	  	<el-form-item prop="imgcode" v-else-if="loginTabs.is_imgcode" class="input-item flex1 mb-0">
			<el-input placeholder="验证码" v-model="loginTabs.form.imgcode" maxlength="6"
			class="border-right-0">
		    	<template slot="append" class="px-0">
		    		<img src="/captcha" onclick="this.src='/captcha?t='+(new Date()).getTime()" height="30" class="captcha pointer">
		    	</template>
			</el-input>
	  	</el-form-item>
	  </div>
	  <div>
	  <el-form-item class="mb-1">
    	<el-checkbox v-model="loginTabs.form.cache"
    	:true-label="1"
    	:false-label="0"><span class="text-grey">七天免登录</span></el-checkbox>
	  </el-form-item>
	  <el-form-item class="mb-0">
	    	<el-button native-type="submit" type="primary" class="d-block w-100 rounded-0" :disabled="loginTabs.btn.submit || loginTabs.btn.loading" :loading="loginTabs.btn.loading">{{loginTabs.btn.loading?'登录中':'登录'}}</el-button>
	  </el-form-item>
	  <el-form-item class="mb-0">
	  	<div class="flex flex-center">
	  		<div class="flex-1">
	  			<a target="_blank" href="/register" class="text-grey">免费注册</a>
	  		</div>
		    <div class="text-grey">其他方式登录</div>
			{eq name=":config('qqlogin.status')" value="1"}
		  	<div class="ml-2 pointer">
		  		<a href="/login/qq" target="_blank">
		  			<img src="__TEMPLATE_STATIC__/icon/icon-login-qq.png" class="other-login-icon">
		  		</a>
		    </div>
			{/eq}
			{eq name=":config('wxlogin.status')" value="1"}
		  	<div class="ml-2 pointer">
		  		<a href="/login/wx" target="_blank">
			  		<img src="__TEMPLATE_STATIC__/icon/icon-login-wechat.png" class="other-login-icon">
			  	</a>
		    </div>
			{/eq}
	    </div>
	  </el-form-item>
	  </div>
	</el-form>
	<el-form @submit.native.prevent="login" :model="loginTabs.form" class="px-3 pt-3 flex1" v-if="loginTabs.nav==='vcode'">
	<div class="flex1 wrap h-100">
	  <el-form-item class="input-item flex1 mb-0">
	    <el-input v-model="loginTabs.form.username"
	    :disabled="loginTabs.btn.loading"
	    autocomplete="off" placeholder="手机号/邮箱" class="rounded-0">
	    </el-input>
	  </el-form-item>
	  	<el-form-item v-if="loginTabs.is_imgcode&&loginTabs.captcha_type==1" class="input-item flex1 mb-0">
	        <div class="GeeTestCaptcha">
	            <div class="GeeTestCaptchaWait text-secondary">正在加载验证码......</div>
	        </div>
	  	</el-form-item>
	  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==2"class="input-item flex1">
	        <div class="vaptchaContainer">
				<div class="vaptcha-init-main">
				    <div class="vaptcha-init-loading">
				    <a href="/" target="_blank">
				        <img src="https://r.vaptcha.net/public/img/vaptcha-loading.gif" />
				    </a>
				    <span class="vaptcha-text">正在加载验证码...</span>
				    </div>
				</div>
			</div>
	  	</el-form-item>
	  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==3"class="input-item flex1 mb-0">
	  	</el-form-item>
	  	<el-form-item v-else-if="loginTabs.is_imgcode&&loginTabs.captcha_type==4"class="input-item flex1 mb-0">
	  		<el-button 
	  		native-type="button" 
	  		:type="loginTabs.form.tsec?'success':'warning'"
	  		class="rounded-0 w-100 TencentCaptchaEl"
	  		icon="el-icon-thumb"
	  		:data-appid="_config.captchatsec"
	  		data-cbfn="vm.TencentCaptchaCallback">
	  			点击验证
	  		</el-button>
	  	</el-form-item>
	  	<el-form-item prop="imgcode" v-else-if="loginTabs.is_imgcode" class="input-item flex1 mb-0">
			<el-input placeholder="图形验证码" v-model="loginTabs.form.imgcode" maxlength="6"
			class="rounded-0">
		    	<template slot="append" class="px-0">
		    		<img src="/captcha" onclick="this.src='/captcha?t='+(new Date()).getTime()" height="30" class="captcha pointer">
		    	</template>
			</el-input>
	  	</el-form-item>
	  <el-form-item class="input-item flex1 mb-0">
	    <el-input v-model="loginTabs.form.vcode"
	    :disabled="loginTabs.btn.loading" class="rounded-0"
	    autocomplete="off" maxlength="6" placeholder="短信验证码">
    		<el-link slot="append" type="primary" :disabled="loginTabs.btn.getVcode || loginTabs.btn.loading" @click="getVcode">{{loginTabs.btn.getVcodeText}}</el-link>
	    </el-input>
	  </el-form-item>
	  </div>
	  <div>
	  <el-form-item class="mb-1">
    	<el-checkbox v-model="loginTabs.form.cache"
    	:true-label="1"
    	:false-label="0"><span class="text-grey">七天免登录</span></el-checkbox>
	  </el-form-item>
	  <el-form-item class="mb-0">
    	<el-button native-type="submit" type="primary" class="d-block w-100 rounded-0" :disabled="loginTabs.btn.submit || loginTabs.btn.loading" :loading="loginTabs.btn.loading">{{loginTabs.btn.loading?'登录中':'登录'}}</el-button>
	  </el-form-item>
	  <el-form-item class="mb-0">
	  	<div class="flex flex-center">
	  		<div class="flex-1">
	  			<a target="_blank" href="/register" class="text-grey">免费注册</a>
	  		</div>
		    <div class="text-grey">其他方式登录</div>
			{eq name=":config('qqlogin.status')" value="1"}
		  	<div class="ml-2 pointer">
		  		<a href="/login/qq" target="_blank">
		  			<img src="__TEMPLATE_STATIC__/icon/icon-login-qq.png" class="other-login-icon">
		  		</a>
		    </div>
			{/eq}
			{eq name=":config('wxlogin.status')" value="1"}
		  	<div class="ml-2 pointer">
		  		<a href="/login/wx" target="_blank">
			  		<img src="__TEMPLATE_STATIC__/icon/icon-login-wechat.png" class="other-login-icon">
			  	</a>
		    </div>
			{/eq}
	    </div>
	  </el-form-item>
	  </div>
	</el-form>
</div>